<?
// error_reporting(E_ERROR | E_WARNING | E_PARSE);
$this->layout='blank.php';

$obres = new obres;
$obres->loadXml();
$obres->loadXmlTypes();
$r = $obres->toARdata();
// $r = $r[0];
?>
<!DOCTYPE html>
<html>
  <head>
    <title>En Obres - Mapa</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="/appsjam/css/style.css" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="/appsjam/js/geoloc.js"></script>
    <script type="text/javascript">
	var map;
	var G = google.maps;
	var types = {};
	var infowindow = new G.InfoWindow({
					  content: document.getElementById('window_content')
				  });
	var geoloc;
	function initialize() {
	      var myOptions = {
		zoom: 14,
		center: new G.LatLng(41.40326856823384, 2.193665164709051),
		mapTypeId: G.MapTypeId.ROADMAP
	      };
	      map = new G.Map(document.getElementById('map_canvas'),myOptions);
	      if(document.getElementById('coordinates')){
		G.event.addListener(map, 'idle', function(){
		      var c = this.getCenter();
		      document.getElementById('lat').value=c.lat();
		      document.getElementById('lng').value=c.lng();
		      document.getElementById('bng').value=
		      "<lat>"+c.lat()+"</lat>\n\t<lng>"+c.lng()+"</lng>";
		});
	      }
	      geoloc = new geoloc(map);
	      var logo = document.createElement('div');
		  logo.className='logo';
	      map.controls[G.ControlPosition.TOP_LEFT].push(logo);
// 	      var crosshairShape = {coords:[0,0,0,0],type:'rect'};
// 	      var marker = new google.maps.Marker({
// 			map: map,
// 			icon: 'http://www.daftlogic.com/images/cross-hairs.gif',
// 			shape: crosshairShape
// 	      });
// 	      marker.bindTo('position', map, 'center'); 
	      
	      load_points();
	}
	G.event.addDomListener(window, 'load', initialize);
	function load_points(){
		<?
		foreach($r as $tp => $rr){
		  ?>
		  var tp = new type({
			id: <?=json_encode($tp)?>
			,image: <?=json_encode($rr['icono'])?>
			,name: <?=json_encode($rr['nom'])?>
		  });
		  types[<?=json_encode($tp)?>] = tp;
		  <?
		  foreach($rr['nodes'] as $pt){
			  ?>
			  var mk = new G.Marker({
				  position: new G.LatLng(<?=$pt['lat']?>,<?=$pt['lng']?>),
				  title: <?=json_encode($pt['nom'])?>,
				  icon: tp.image
			  });
			  mk.setMap(map);
			  <?
			  if($pt['photo_url']) {?>mk.image=<?=json_encode($pt['photo_url'])?>;<?}
			  if($pt['url']) {?>mk.url=<?=json_encode($pt['url'])?>;<?}
			  ?>
			  G.event.addListener(mk, 'click', function(){
// 				  document.getElementById('window_image').src = this.image;
// 				  document.getElementById('window_link').src = this.url;
				  infowindow.setContent("<div id='window_content'>"
					  +"<img src='"+this.image+"' id='window_image' />"
					  +"<div>"
						  +"<a target='_blank' href='"+this.url+"' id='window_link'> Més informació </a>"
					  +"</div>"
				      +"</div>");
				  infowindow.setPosition(this.getPosition());
				  infowindow.setMap(map, this);
			  });
			  <?
		  }
		}
		?>
	}
	
	function type(opts){
		this.id=opts.id;
		this.image=opts.image;
		this.name = opts.name;
	}
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
    <?if($_GET['coordinates']){?>
	<div id='coordinates' style='background: white; position: absolute; padding: 10px; z-index:100; top:0;left:0;'>
	  <div>lat: <input id='lat' type='text' /></div>
	  <div>lng: <input id='lng' type='text' /></div>
	  <div>bunga: <input id='bng' type='text' /></div>
	</div>
    <?}?>
  </body>
</html>